$mq-picture: $mq-medium;

.streamer-list {
  h1 {
    &::before {
      display: none;

      @include breakpoint($mq-picture) {
        display: inline;
      }
    }
  }

  .streamer {
    border-top: $border;
    position: relative;
    display: flex;

    @include transition;
    @include breakpoint($mq-subnav-top) {
      overflow-x: hidden;
    }

    h1 {
      @extend %roboto;

      margin-bottom: 0.7em;

      @include fluid-size('font-size', 23px, 40px);

      &::before {
        display: inline;
        margin-right: 0.2em;

        @include breakpoint($mq-picture) {
          display: none;
        }
      }
    }

    &:nth-child(even) {
      background: $c-bg-zebra;
      justify-content: space-between;

      .picture {
        order: 3;
      }
    }

    &:hover {
      background: mix($c-link, $c-bg-box, 15%);
    }
  }

  .overlay {
    @extend %link-overlay;
  }

  .picture {
    flex: 0 0 300px;

    &.default {
      opacity: 0.3;
    }

    display: none;

    @include breakpoint($mq-picture) {
      display: block;
    }
  }

  .overview {
    margin: 20px 10px 0 2.5vw;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    padding-bottom: 15px;
  }

  .headline {
    font-style: italic;
  }

  .headline.medium {
    font-size: 0.95em;
  }

  .headline.large {
    font-size: 0.9em;
  }

  .services {
    margin: 5px 0 10px 0;
    display: none;

    @include breakpoint($mq-large) {
      display: block;
    }
  }

  .service {
    @extend %nowrap-ellipsis;

    display: flex;
    font-size: 1.2em;
    padding: 3px 0;

    svg {
      width: 1.4em;
      height: 1.4em;
      margin-right: 0.4em;
      opacity: 0.7;
    }
  }

  .ribbon {
    width: 150px;
    height: 150px;
    overflow: hidden;
    position: absolute;
    top: -10px;
    right: -10px;
    z-index: 2;

    @include breakpoint($mq-not-xx-small) {
      transform: scale(0.7);
      transform-origin: top right;
    }

    &::before,
    &::after {
      position: absolute;
      z-index: 0;
      content: '';
      display: block;
      border: 5px solid #2980b9;
      border-top-color: transparent;
      border-right-color: transparent;
    }

    &::before {
      top: 0;
      left: 0;
    }

    &::after {
      bottom: 0;
      right: 0;
    }

    span {
      position: absolute;
      left: -20px;
      top: 35px;
      transform: rotate(45deg);
      display: block;
      width: 225px;
      padding: 15px 0;
      background-color: $c-primary;
      box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
      color: $c-primary-over;
      font: 700 18px/1 Roboto;
      text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
      text-transform: uppercase;
      text-align: center;
    }
  }
}
